<!--
 * relative     : e:\Code\CaseManagement\case-management-web\src\components\downloadSqlFile.vue
 * Author       : 郭鹏超
 * Date         : 2024-12-03 14:21
 * LastEditors  : 郭鹏超
 * LastEditTime : 2024-12-03 17:41
 * Description  : 
 * CodeIterationRecord: 
 -->
<template>
  <base-layout header="aline-right">
    <template #header>
      <el-button class="button-update" @click="downloadSQLFile">下载 SQL 文件</el-button>
    </template>
    <el-input v-model="sqlString" class="h-100%!" type="textarea" :autosize="{ minRows: 999, maxRows: 999 }" placeholder="Please input" />
  </base-layout>
</template>

<script setup lang="ts">
const props = defineProps({
  modelValue: {
    type: String,
    default: ""
  },
  fileName: {
    type: String,
    default: "mysql"
  }
});
const emits = defineEmits(["update:modelValue"]);
let sqlString = useVModel(props, "modelValue", emits);
const downloadSQLFile = () => {
  // 创建 Blob 对象
  const blob = new Blob([sqlString.value], { type: "text/plain" });
  const url = URL.createObjectURL(blob);

  // 创建下载链接
  const a = document.createElement("a");
  a.href = url;
  a.download = props.fileName + ".sql"; // 文件名
  document.body.appendChild(a);
  a.click();

  // 清理
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
};
</script>
